<template>
	<view class="content">
		<view class="navbar">
			<view v-for="(item, index) in navList" :key="index" class="nav-item" :class="{current: tabCurrentIndex === index}"
			 @click="tabClick(index,item.state,item.tabtype)">
				{{item.text}}
			</view>
		</view>
		<view class="navbar">
			<view v-for="(item, index) in tablist" :key="index" class="nav-item" :class="{current: tabindex === index}" @click="navclick(index,item.status)">
				{{item.text}}
			</view>
		</view>
		<swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab">
			<swiper-item class="tab-content" v-for="(tabItem,tabIndex) in navList" :key="tabIndex">
				<scroll-view class="list-scroll-content" scroll-y @scrolltolower="initdata">
					<!-- 空白页 -->
					<empty v-if="orderlist.length === 0"></empty>
					<!-- 订单列表 -->
					<view v-for="(item,index) in orderlist" :key="index" class="order-item">
						<view class="i-top b-b">
							<text class="time">{{item.create_time}}</text>
							<text class="state" v-show="item.status == 1" :style="{color: item.stateTipColor}">待付款</text>
							<text class="state" v-show="item.status == 0" :style="{color: item.stateTipColor}">待接单</text>
							<text class="state" v-show="item.status == 2" :style="{color: item.stateTipColor}">已支付</text>
							<text class="state" v-show="item.status == 3" :style="{color: item.stateTipColor}">交易完成</text>
							<text class="state" v-show="item.status == 4" :style="{color: item.stateTipColor}">已取消</text>
						</view>
						<view class="orderinfo_" @click="toDetail(item)">
							<view>单价：{{item.danjia}}</view>
							<view>交易数量：{{item.cbt | moneyFilter}}</view>
							<view>总价：{{item.qian | moneyFilter}}</view>
							<view>支付方式：{{item.money_type ==1 ?'微信支付':'支付宝支付'}}</view>
						</view>
						<view class="action-box b-t">
							<button class="action-btn" v-show="item.status ==0 ">挂售中</button>
							<button class="action-btn" @click="cancelorder(item.id,index,'status')" v-show="item.status ==1">取消订单</button>
							<button class="action-btn recom" @click="paynow(item.id,item.money_type)" v-if="item.status ==1 && type == 2">立即支付</button>
							<button class="action-btn recom" @click="paynow(item.id,item.money_type)" v-if="item.status ==1 && type == 1">等待支付</button>
							<button class="action-btn recom" v-show="item.status == 2">已支付</button>
							<button class="action-btn recom" v-show="item.status == 3">已完成</button>
							<button class="action-btn recom" v-show="item.status == 4">订单已取消</button>
						</view>
					</view>
					<uni-load-more v-if="needLoad" :status="loadingType"></uni-load-more>
				</scroll-view>
			</swiper-item>
		</swiper>
		<!-- 	<uniPopup ref='poup' withMask type="bottom">
			<view class="cancleTitle">
				取消订单
			</view>
			<view class="content_trouble">
				<view class="desc">
					请选择你取消订单的原因
				</view>
				<radio-group @change="radioChange">
					<view class="resonItme" v-for="(item,index) in resons" @click="tabReson(index)">
						<view class="resconContext">
							{{item.dataName}}
						</view>
						<radio :checked="index === resonIndex" color="#fa436a"></radio>
					</view>
				</radio-group>
				<view class="bottom">
					<view class="cancle" @click="closePoup()">
						取消
					</view>
					<view class="confirm" @click="cancelOrder()">
						确定
					</view>
				</view>
			</view>
		</uniPopup> -->
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import empty from "@/components/empty";
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import Json from '@/Json';
	export default {
		components: {
			uniLoadMore,
			empty,
			uniPopup
		},
		data() {
			return {
				tabindex: 0,
				type: 2,
				user: {},
				orderlist: [],
				status: 0,
				resonIndex: 0,
				resons: [],
				self: true,
				calcelItem: {},
				tabCurrentIndex: 0,
				pagesize: 15,
				loadingType: 'more',
				iswaitload: false,
				page: 1,
				needLoad: true,
				loading: false,
				isdone: false,
				tablist: [{
						text: '待接单',
						loadingType: 'more',
						status: 0,
					},
					{
						text: '待付款',
						loadingType: 'more',
						status: 1,
					}, {
						text: '已支付',
						loadingType: 'more',
						status: 2
					},
					{
						text: '交易完成',
						loadingType: 'more',
						status: 3
					},
					{
						text: '已取消',
						loadingType: 'more',
						status: 4
					},
				],
				navList: [{
						text: '我买入的',
						loadingType: 'more',
						type: 'waitPay',
						page: 0,
						orderList: [],
						tabtype: 2
					},
					{
						text: '我卖出的',
						loadingType: 'more',
						type: 'waitPay',
						page: 0,
						orderList: [],
						tabtype: 1
					},
				],
			};
		},
		onShow(){
			this.isdone = false;
			this.page = 1;
			this.status = 0;
			this.type = 2;
			this.tabCurrentIndex = 0;
			this.tabindex = 0;
			this.loadData()
		},
		onLoad(options) {
			// this.getIndex()
			this.user = uni.getStorageSync('userDetail')
		},
		// onPullDownRefresh: function() {
		// 	console.log('refresh');
		// 	let that = this;
		// 	this.loadData()
		// },
		methods: {
			paynow(id, money_type) {
				let that = this;
				const paycode = new Promise((resolve, reject) => {
					uni.request({
						url: 'https://www.ggshop1688.com/api/transaction/buy',
						data: {
							id: id,
							type: 1,
							money_type: money_type,
						},
						method: 'POST',
						header: {
							token: uni.getStorageSync('userInfo').token
						},
					}).then(data => {
						if (data[1].data.status == 1) {
							resolve(data[1].data.data)
						} else {
							that.$api.msg(data[1].data.msg)
						}
					})
				})
				paycode.then(result => {
					console.log(result)
					var url = result.payurl
					var payParam = JSON.stringify(result.payinfo)
					uni.navigateTo({
						url: '/subPackage/paynow/paynow?id=' + id + '&payParam=' + payParam + '&paytype=' + 1
					})
					// uni.request({
					// 	url: 'https://gua.qinmaoyi.cn' + url,
					// 	data: {
					// 		payObj: payParam
					// 	},
					// 	method: 'POST',
					// 	header: {
					// 		token: uni.getStorageSync('userInfo').token
					// 	},
					// }).then(data => {
					// 	let order = data[1].data.data;
					// 	console.log(order)
					// 	// let orderInfo = JSON.stringify(order)
					// 	// console.log(orderInfo)
					// 	uni.getProvider({
					// 		service: "payment",
					// 		success: function(sc) {
					// 			uni.requestPayment({
					// 				provider: sc.provider[0],
					// 				orderInfo:order,
					// 				success:function(res){
					// 					 console.log('res:' + JSON.stringify(res));
					// 				},
					// 				fail:function(err){
					// 					 console.log('fail:' + JSON.stringify(err));
					// 				}
					// 			})
					// 		},
					// 	})
					// })
				}).then(data => {
					console.log(data)

				})
				// .then(result=>{
				// 	console.log(result)						
				// 	// wxPay() {
				// 	// 		let _this = this
				// 	// 		_this.$Request.request('/api/weixinpays/toWeixinPay', 'POST', {
				// 	// 			pkey: _this.pkey
				// 	// 		}, true).then(res => {
				// 	// 			console.log(res)
				// 	// 			uni.requestPayment({
				// 	// 				...res.data,
				// 	// 				success: function(res) {
				// 	// 					// console.log(res)
				// 	// 					_this.$api.msg(`支付成功`)
				// 	// 					setTimeout(() => {
				// 	// 						uni.redirectTo({
				// 	// 							url: '/pages/money/paySuccess'
				// 	// 						})
				// 	// 					}, 800)
				// 	// 				} 
				// 	// 			})
				// 	// 		}).catch(err => {
				// 	// 			console.log(err)
				// 	// 		})
				// 	// 	}
				// })
			},
			cancelorder(id, index, status) {
				let that = this;
				uni.request({
					url: 'https://www.ggshop1688.com/api/transaction/cancel',
					data: {
						id: id,
					},
					method: 'POST',
					header: {
						token: uni.getStorageSync('userInfo').token
					},
				}).then(data => {
					if (data[1].data.status == 1) {
						that.$api.msg(data[1].data.msg)
						that.orderlist[index][status] = 4
					}

				}).catch(err => {
					console.log(err)
				})
			},
			initdata() {
				console.log(this.isdone)
				let that = this;
				if (that.isdone) {
					return false;
				}
				that.loading = true;
				that.page++
				that.loadingType = 'loading'
				that.loadData()
			},
			loadData() {
				let that = this;
				console.log(that.status)
				if (that.isdone) {
					return false;
				}
				uni.showLoading({
					title: '加载中'
				});
				uni.request({
					url: 'https://www.ggshop1688.com/api/transaction/out_in_list',
					data: {
						p: this.page,
						self: true,
						type: this.type,
						status: this.status
					},
					method: 'POST',
					header: {
						token: uni.getStorageSync('userInfo').token
					},
				}).then(data => {

					uni.hideLoading()
					if (data[1].data.status == 1) {
						data[1].data.data.list.forEach(item => {
							// if(that.tabCurrentIndex == 0){
							// console.log(that.tabCurrentIndex)
							// if(that.user.userId == item.mc_id){
							// this.orderlist.push(item)	
							// }
							// }else{
							// if(that.user.userId == item.mr_id){
							this.orderlist.push(item)
							// }
							// }
						})
						
						// uni.stopPullDownRefresh()
						that.loadingType = 'more'
						if (data[1].data.data.list.length < 20) {
							that.loading = true;
							that.isdone = true;
							that.loadingType = 'noMore'
						}
					}

				}).catch(err => {
					console.log(err)
				})
			},
			showComment(item, shopName) {
				// console.log(item)
				let param = {
					goodsId: item.goodsId,
					specId: item.goodsSpecId,
					orderId: item.orderId,
					orderGoodsId: item.id,
					shopName: shopName,
					img: item.goodsImg,
					goodsName: item.goodsName
				}
				uni.navigateTo({
					url: '/subPackage/showComment/showComment?param=' + JSON.stringify(param)
				})
			},
			toComment(item) {
				uni.navigateTo({
					url: '../../subPackage/comment/comment?goods=' + JSON.stringify(item)
				})
			},
			toDetail(item) {
				var list = JSON.stringify(item)
				if (this.type == 2 && item.status == 1) {
					this.paynow(item.id, item.money_type)
				}
				if (this.type == 2 && item.status == 2) {
					uni.navigateTo({
						url: '/subPackage/payending/payending?item=' + list + '&type=' + this.type + '&status=' + item.status
					})
				}
				if (this.type == 1 && item.status == 2) {
					uni.navigateTo({
						url: '/subPackage/payending/payending?item=' + list + '&type=' + this.type + '&status=' + item.status
					})
				}
				if (this.type == 1 && item.status == 1) {
					uni.navigateTo({
						url: '/subPackage/pendingpay/pendingpay?item=' + list + '&type=' + this.type + '&status=' + item.status
					})
				}
				if (this.type == 1 && item.status == 3 || this.type == 2 && item.status == 3) {
					uni.navigateTo({
						url: '/subPackage/payending/payending?item=' + list + '&type=' + this.type + '&status=' + item.status
					})
				}
			},
			// 选择取消订单原因
			radioChange(e) {
				console.log(e)
				this.resonIndex = e.detail.value
			},
			tabReson(index) {
				this.resonIndex = index
			},
			//获取订单列表	
			loadlist() {
				let that = this;

			},
			getIndex() {
				this.$Request.request('/api/orders/index', 'GET', {}, true).then(res => {
					if (res.status == 1) {

						this.resons = res.data.order_cancel
					}
				}).catch(err => {

				})
			},
			recive(id) {
				uni.showModal({
					title: "确认收货",
					content: '你确认收货吗？',
					success: (res) => {
						if (res.confirm) {
							// this.$api.msg("你点击了确认")
							this.$Request.request('/api/orders/receive', 'POST', {
								id
							}, true).then(res => {
								if (res.status == 1) {
									this.$api.msg(res.msg)
									this.loadData('', true)
								}
							}).catch(err => {
								console.log(err)
							})
						} else if (res.cancel) {
							// this.$api.msg("点击了取消")
						}
					}
				})
			},
			//swiper 切换
			changeTab(e) {
				this.tabCurrentIndex = e.target.current;
				this.orderlist = [];
				this.loadData();
			},
			//顶部tab点击
			tabClick(index, state, type) {
				console.log(this.status)
				this.tabCurrentIndex = index;
				this.type = type
				this.page = 1;
				this.status = 0;
				this.tabindex = 0;
				this.loadingType = 'more'
				this.isdone = false;
			},
			navclick(index, state, ) {
				this.tabindex = index;
				this.status = state
				this.page = 1;
				this.loadingType = 'more'
				this.isdone = false;
				this.orderlist = [];
				this.loadData();
			},
			//删除订单
			deleteOrder(index) {
				uni.showLoading({
					title: '请稍后'
				})
				setTimeout(() => {
					this.navList[this.tabCurrentIndex].orderList.splice(index, 1);
					uni.hideLoading();
				}, 600)
			},
			openPoup(item) {
				this.calcelItem = item
				this.$refs.poup.open()
			},
			closePoup() {
				this.calcelItem = {}
				this.$refs.poup.close()
			},
			//取消订单
			cancelOrder() {
				let item = this.calcelItem
				let reson = this.resons[this.resonIndex]

				uni.showLoading({
					title: '请稍后'
				})
				setTimeout(() => {
					this.$Request.request('/api/orders/cancellation', 'POST', {
						id: item.orderId,
						reason: reson.id
					}, true).then(res => {
						if (res.status == 1) {
							this.$api.msg(res.msg)
							this.loadData('', true)
							uni.hideLoading();
							this.closePoup()
						}

					}).catch(err => {
						console.log(err)
					})
				}, 600)
			},

			//订单状态文字和颜色
			orderStateExp(state) {
				let stateTip = '',
					stateTipColor = '#fa436a';
				switch (+state) {
					case 1:
						stateTip = '待付款';
						break;
					case 2:
						stateTip = '待发货';
						break;
					case 9:
						stateTip = '订单已关闭';
						stateTipColor = '#909399';
						break;

						//更多自定义
				}
				return {
					stateTip,
					stateTipColor
				};
			},
			// 立即支付
			choicePay(pkey) {
				uni.redirectTo({
					url: '../money/pay?pkey=' + pkey
				})
			},
			// 提醒发货
			noticeDeliver(item) {
				uni.showLoading({
					title: '请稍后'
				})
				setTimeout(() => {
					this.$Request.request('/api/orders/noticeDeliver', 'POST', {
						id: item.orderId,
					}, true).then(res => {
						if (res.status == 1) {
							this.$api.msg(res.msg)
							this.loadData('', true)
							uni.hideLoading();
						}

					}).catch(err => {
						console.log(err)
					})
				}, 600)
			}
		},
	}
</script>

<style lang="scss">
	.orderinfo_ {
		font-size: 30upx;
		color: #303133;
	}

	@import '../../pages/order/order.scss'
</style>
